<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">
    <script src="./vue.js"></script>
    
</head>
<body>
    <div id="app" class="wrap center-block" style="max-width: 600px;padding:15px;border:1px solid #333">
      商品名：<input type="text" v-model="item.itemName" class="form-control">
      数量<input type="number" v-model.number="item.itemNum" class="form-control">
      价格<input type="number" v-model.number="item.itemPrice" class="form-control">
      <button @click="addItem" class="btn">增加</button>
      <table class="table table-bordered  table-hover table-condensed">
       <thead>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>购买数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
       </thead>
        <tbody>
          <tr v-for="(item,index) in items" :key="index">
            <td>
                <input v-model="item.checked" @change="singleCheck(index)" type="checkbox">
                {{item.itemName}}
              </td>
            <td>
              ￥{{item.itemPrice}}
            </td>
            <td>
              <button class="btn btn-xs" @click="addNum(index)">+</button>
              <span>{{item.itemNum}}</span>
              <button class="btn btn-xs" @click="reduceNum(index)">-</button>
            </td>
            <td>
              ￥{{  parseFloat((item.itemNum*item.itemPrice).toFixed(2)) }}
            </td>
            <td>
              <button class="btn btn-sm btn-danger" @click="delItem(index)">删除</button>
            </td>
          </tr>
          <tr>
            <td>全选
              <input v-model="allChecked" @click="allCheckedClick" type="checkbox" >
            </td>
            <td colspan="3">总价：￥{{ total }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
              item:{
                itemName:'',
                itemNum:0,
                itemPrice:0
              },
              total:0,
              allChecked:true,
              items:[
                
              ]
            },
            mounted(){
              
              // 这个函数，会在 视图第一次加载完后自动调用
              // 取缓存  判断有无
              let items = localStorage.getItem('items')?JSON.parse(localStorage.getItem('items')):[];
              this.items = items;
              this.calcTotal();//页面打开 默认先 计算 总价格
            
            },
            methods: {
              addItem () {
                // 添加商品
                
                let item = {
                  ...this.item,
                  checked:true
                }
              //  let item = JSON.parse(JSON.stringify(this.item))
              // item.checked=true;
                this.items.unshift(item);
                this.calcTotal();
              },
              allCheckedClick () {
                // 全选
                console.log( this.allChecked );
                this.items.forEach(item=>{
                  item.checked = !this.allChecked
                })
                this.calcTotal();
              },
              singleCheck (index) {
                
                // 判断 所有的商品是不是都选中了
                let allChecked = this.items.every(item=>item.checked);
                console.log(allChecked)
                this.allChecked = allChecked;
                this.calcTotal();
              },
              delItem (index) {
                if(confirm("确认删除吗？")){
                  this.items.splice(index,1);
                  this.calcTotal();
                }
              },
              reduceNum (index) {
                // 减少商品数量
                this.items[index].itemNum--;
                if(this.items[index].itemNum <= 1 ){
                  this.items[index].itemNum = 1;
                }
                this.calcTotal();
              },
              addNum (index) {
                // 增加数量
                this.items[index].itemNum++;
                this.calcTotal();
              },
              calcTotal () {
                /*
                计算总价格：
                  所以已经选中的商品的 单价 * 数量 累加
                */ 
                let checkedItems = this.items.filter(item=>item.checked);
                /*
                let checkedItems = this.items.filter(function(item){
                  return item.checked;
                })*/
                this.total = 0;
                checkedItems.forEach((item)=>{
                  this.total += item.itemNum*item.itemPrice;
                })
                this.total = parseFloat(this.total.toFixed(2));
                // 更新缓存
                localStorage.setItem('items',JSON.stringify(this.items));
              }
            }
        })
       
    </script>
</body>
</html>
